<template>
    <div>
        <div class="zhezhao" v-if="bgShow" @click="bgIsShow">
            <div class="yuyue-date">
                <p class="mb30">开始时间<span>{{ date1 | getyear }}</span><span>{{ date1 | getTime }}</span></p>
                <p>结束时间<span>{{ date2 | getyear }}</span><span>{{ date2 | getTime }}</span></p>
            </div>
        </div>
        <header>
            <h1 class="tc fn mb40 pr">
                <router-link class="pa cfff" to="/mine" tag="span" style="left:20rem;top: 5rem;">
                    <i class="el-icon-arrow-left f40 "></i>
                </router-link>我的订单
            </h1>
            <ul class="flex tc jcc cfff f30">
                <li @click="change(1)" :class="{ 'active': num == 1 ? true : false }">进行中</li>
                <li @click="change(2)" :class="{ 'active': num == 2 ? true : false }">已完成</li>
            </ul>
            <div class="manner flex jcsb bcfff aic">
                <div class="f25">
                    维修方式：
                    <select class="cfff">
                        <option value="">全部</option>
                        <option value="1">到店维修</option>
                        <option value="2">上门取车</option>
                    </select>
                </div>
                <p class="pr f25" @click="getDate">预约日期</p>
                <van-popup v-model="show" position="bottom">
                    <van-datetime-picker title="请选择开始时间" v-model="currentDate1" type="datetime" @confirm="confirmFn"
                        @cancel="cancelFn" />
                </van-popup>
                <van-popup v-model="isShow" position="bottom">
                    <van-datetime-picker title="请选择结束时间" v-model="currentDate2" type="datetime" @confirm="confirmFn2"
                        @cancel="cancelFn" />
                </van-popup>
            </div>
        </header>
        <main>
            <div v-if="washData.length">
                <div v-for="el in washData" class="wash-info bcfff mb20" @click="washInfo(el.id)" :key="el.id">
                    <p>维修单号：<span>{{ el.serviceCode }}</span></p>
                    <p>维修方式：<span>到店维修</span></p>
                    <p>预约日期：<span>{{ el.bookingTime }}</span></p>
                </div>
            </div>
            <div v-else class="wash-info bcfff mb20">
                <h1 class="f50 fb tc" style="color: skyblue;">没有订单呀！</h1>
            </div>
        </main>
    </div>
</template>

<script>
import { orderList } from '../../../api/using';
export default {
    data() {
        return {
            num: 1,
            washData: [],
            show: false,
            isShow: false,
            bgShow: false,
            currentDate1: new Date(),
            currentDate2: new Date(),
            date1: '',
            date2: '',
        }
    },
    mounted() {
        this.init();
    },
    filters: {
        getyear(val) {
            let year = val.getFullYear();
            let month = val.getMonth() + 1;
            let day = val.getDate();
            month = month < 10 ? '0' + month : month;
            day = day < 10 ? '0' + day : day;
            return `${year}年${month}月${day}日`
        },
        getTime(val) {
            let hour = val.getHours();
            let minute = val.getMinutes();
            hour = hour < 10 ? '0' + hour : hour;
            minute = minute < 10 ? '0' + minute : minute;
            return `${hour}：${minute}`
        }
    },
    methods: {
        init() {
            orderList({ userId: 4, status: this.num, fromDate: this.date1, toDate: this.date2 })
                .then(r => {
                    this.washData = r.data.filter(el => el.orderType === '维修订单')
                })
                .catch(e => {
                })
        },
        washInfo(id) {
            this.$router.push({
                name: 'washInfo',
                query: {
                    id: id,
                    userId: 4
                }
            })
        },
        getDate() {
            this.show = true;
        },
        confirmFn(val) {
            this.show = false;
            this.isShow = true;
            this.date1 = val
        },
        confirmFn2(val) {
            this.isShow = false;
            this.bgShow = true;
            this.date2 = val
        },
        cancelFn() {
            this.show = false;
            this.isShow = false;
        },
        change(i) {
            this.num = i;
            this.init();
        },
        bgIsShow() {
            this.bgShow = false;
            this.init();
        }
    }
}
</script>

<style scoped>
* {
    box-sizing: border-box;
}

.zhezhao {
    position: absolute;
    z-index: 999;
    background-color: rgba(33, 33, 33, .2);
    width: 100%;
    height: 100%;
}

.yuyue-date {
    margin: 300rem auto 0;
    background-color: #fff;
    width: 690rem;
    border-radius: 10rem;
    padding: 50rem;
    font-size: 26rem;
    margin-bottom: 50rem;
}

.yuyue-date span {
    display: inline-block;
    width: 260rem;
    height: 55rem;
    text-align: center;
    line-height: 55rem;
    background-color: #f2f2f2;
    margin-left: 65rem;
    vertical-align: middle;
    border-radius: 40rem;
}

.yuyue-date p span:last-child {
    width: 135rem;
    margin-left: 20rem;
}

header {
    padding: 60rem 20rem 0 20rem;
    background-color: #3284fc;
    height: 392rem;
}

header>h1 {
    font-size: 32rem;
    color: #fff;
}

header ul li {
    padding-bottom: 10rem;
    margin-bottom: 20rem;
}

header ul li.active {
    border-bottom: 5rem solid #fff;
}

header ul li:first-child {
    margin-right: 98rem;
}

header .manner {
    height: 120rem;
    border-radius: 20rem;
    padding: 0 35rem 0 28rem;
}

header .manner select {
    padding-left: 10rem;
    padding-right: 10rem;
    height: 55rem;
    border: 0;
    background-color: #277af6;
    border-radius: 10rem;
    outline: none;
    font-size: 23rem;
}

header .manner select option {
    background-color: #fff;
    color: #333;
}

header .manner>p::before {
    content: "";
    position: absolute;
    width: 34rem;
    height: 27rem;
    background: url(../../../assets/img/my-wash/date.png) no-repeat;
    background-size: 100%;
    left: -50rem;
    top: 2rem;
}

header .yuyue-date {
    z-index: 9999;
    width: 690rem;
    height: 240rem;
    position: absolute;
    background-color: #fff;
}

main {
    padding: 0 20rem;
}

main .wash-info {
    position: relative;
    top: -32rem;
    padding: 34rem 30rem;
    border-radius: 20rem;
}

main .wash-info p {
    font-size: 23rem;
    color: #333;
    margin-bottom: 28rem;
}

main .wash-info p:last-child {
    margin-bottom: 0;
}

main .wash-info p span {
    color: #808080;
}

main>div:last-child h1 {
    font-size: 50rem;
    font-weight: bold;
}
</style>